<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>批量打印</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">


		<style type="text/css">
			.layui-table-click {
				background-color: cadetblue !important;
				color: white;
			}

			::-webkit-scrollbar {
				width: 6px;
				height: 10px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			::-webkit-scrollbar-thumb {
				background: rgba(144, 147, 153, .3);
				border-radius: 4px;
				cursor: pointer;
			}

			.layui-form-label {
				float: left;
				display: block;
				padding: 7px 1px;
				width: 100px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
			}

			/**输入框高度设置**/
			.layui-input,
			.layui-select,
			.layui-textarea {
				height: 30px;
				line-height: 30px\9;
			}

			/**按钮样式设置**/
			.layui-btn {
				height: 30px;
				line-height: 30px;
				font-size: 13px;
			}

			.layui-btn+.layui-btn {
				margin-left: 0px;
			}

			.layui-table,
			.layui-table-view {
				margin: 0px 0;
			}

			
			.tableboxs{
				margin: 0 auto;
				width: 80%;
				position: relative;
			}
			
			.tablebox {
				margin: 0 auto;
				width: 80%;
				text-align: center;
			}

			.tablebox .titletop {
				margin-bottom: 10px;
				margin-top: 10px;
				font-size: 20px;
				font-weight: 700;
			}

			.tablebox .spans {
				width: 100%;
				margin-bottom: 5px;
			}
			
			.tablebox .spans div {
				display: flex;
				justify-content: space-between;
			}

			.tablebox .spans .maincol {
				color: #ff0000;
				font-weight: 700;
			}

			.tablebox td,
			.tablebox th {
				height: 30px;
				padding: 5px 10px;
			}

			.posbottom {
				width: 80%;
				margin: 10px auto;
			}

			.posbottom div {
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
			}

			/* 下载 */
			.topicon{
				width: 98%;
				margin: 10px auto 0;
				overflow: hidden;
				
			}
			.layui-inline {
				float: right;
				width: 17px;
				height: 17px;
				padding: 5px;
				line-height: 16px;
				margin-right: 10px;
				text-align: center;
				color: #333;
				border: 1px solid #ccc;
				cursor: pointer;
				transition: .5s all;
			}
			.layui-icon {
			    font-family: layui-icon!important;
			    font-size: 16px;
			    font-style: normal;
			}
		</style>
	</head>
	<body >
		<div id="app">
			<div class="topicon">
				<div class="layui-inline" title="打印" @click="printHtml"  lay-event="LAYTABLE_PRINT"><i
						class="layui-icon layui-icon-print"></i></div>
			</div>
			<!-- <div class="topicon">
                <div class="layui-inline" title="下载"><i class="el-icon-download"></i></div>
            </div> -->

			<div class="demoTable" style="padding: 5px;color: #000000;" id="printMy" >
				<table id="tablebox_table">
					<div class="tableboxs">
						<!-- 专用收据表格 -->
						<table border='1' class='tablebox'>
							<caption class="titletop">{{formData.mapmine.sjtitle}}</caption>
							<caption class="spans">
								<div>
									<span>用户名称：{{formData.name}}</span>
									<span v-if="formData.mapmine.pjh!=''">收据编号：{{formData.mapmine.pjh}}</span>
									<span v-else >收据编号：{{formData.mapmine.jkbh}}</span>
								</div>
							</caption>
							<caption class="spans">
								<div>
									<span>用户地址：{{formData.dz}}</span>
								</div>
							</caption>
							<tr>
								<th colspan="7">
									<div style="display: flex;justify-content: space-between;">
<!--										<span>用户ID：{{formData.fjbh}}</span>-->
										<span>计费年度：{{formData.minnd}}-{{Number(formData.maxnd)+1}}</span>
									</div>
								</th>
							</tr>
							<tr>
								<th>面积(m²)</th>
								<th>供热时长</th>
								<th>单价(元)</th>
								<th>金额</th>
								<th>过水热费</th>
								<th>欠热费额</th>
								<th>优惠费额</th>
							</tr>
							<tr>
								<td>{{formData.sl}}</td>
								<td>165</td>
								<td>{{formData.dj}}</td>
								<td>{{formData.fee}}</td>
								<td>{{formData.gsr}}</td>
								<td>{{formData.fee}}</td>
								<td>0</td>
							</tr>
							<tr>
								<td>本次应交</td>
								<td colspan="3">{{formData.fee}}</td>
								<td>应交滞纳金</td>
								<td>{{formData.znj}}</td>
								<td>本次余额</td>
							</tr>
							<tr>
								<td>本次实交</td>
								<td colspan="3">{{formData.fee}}</td>
								<td>实交违约金</td>
								<td>{{formData.znj}}</td>
								<td>0</td>
							</tr>
							<tr>
								<td>仍欠金额</td>
								<td>0</td>
								<td>实交大写</td>
								<td colspan="4" style="text-align: left;">{{formData.fee_str}}</td>
							</tr>

							<tr>
								<td>备注</td>
								<td colspan="6" style="text-align: left;">{{formData.bz}}</td>
							</tr>
						</table>

						<div class="posbottom">
							<div>
								<span style="width: 50%;">收费员：{{formData.mapmine.czr}}</span>
								<span>交款日期：{{formData.mapmine.sj}}</span>
							</div>
							<div>
								<span>交(退)款人签字：</span>
							</div>
							<div style="margin-top: 20px;">
								<span>注：此票只作为收费依据，不作为正规发票使用，如需发票请于每年10月20日至次年3月30日凭此收据换取。</span>
							</div>
						</div>

					</div>


				</table>
			</div>
		</div>



		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					parmsData:{},
					formData:{}
				},
				created(){
					this.parmsData = getParams();
					this.getData();
				},
				methods: {
					printHtml(){
						$("#printMy").print();
					},
					async getData(){
						const res = await postWebCustom(getTableId("982"),{jkbh:this.parmsData.id});
						if(res.code == 0){
							top.alert(res.msg);
							return;
						}
						this.formData = res.data;
					}
				},

			})
		</script>
	</body>
</html>
